<template>
  <div class="item-menu-main base-info">
    <ol class="base-info-details">
      <li>姓名：{{ userInfo.name }}</li>
      <li>性别：{{ userInfo.sex }}</li>
      <li>国家：{{ userInfo.gjmc }}</li>
      <li>名族：{{ userInfo.mzmc }}</li>
      <li>出生日期：{{ userInfo.birth }}</li>
      <li>手机号：{{ userInfo.sjhm }}</li>
      <li>证件号码：{{ userInfo.zjhm }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  name: 'BaseInfo',
  data() {
    return {
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  }
}
</script>

<style lang="scss" scoped>
.base-info{
  h2,h3{
    margin-bottom: 15px;
    font-size: 20px;
    text-align: center;
    color: #565656;
  }
  .base-info-details{
    width: 1040px;
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    li{
      width: 250px;
      margin-bottom: 20px;
      margin-right: 10px;
      font-size: 16px;
      color: #565656;
    }
  }
}
</style>
